<template>
  <div class="register-container">
    <div class="register-box">
      <!-- Logo区域 -->
      <div class="logo-area">
        <img :src="logoUrl" alt="智能家居logo" class="logo-image" />
        <h1 class="logo-title">智能家居管理系统</h1>
        <p class="logo-subtitle">让生活更智能，让家居更贴心</p>
      </div>

      <!-- 注册表单 -->
      <form @submit.prevent="handleRegister" class="register-form">
        <div class="input-group">
          <input type="text" v-model="form.username" placeholder="请输入用户名" class="form-input" />
          <i class="fas fa-user input-icon"></i>
        </div>

        <div class="input-group">
          <input type="tel" v-model="form.phone" placeholder="请输入手机号" class="form-input" />
          <i class="fas fa-phone input-icon"></i>
        </div>

        <div class="input-group">
          <input :type="showPassword ? 'text' : 'password'" v-model="form.password" placeholder="请设置密码"
            class="form-input" />
          <i :class="['fas', showPassword ? 'fa-eye-slash' : 'fa-eye', 'input-icon', 'cursor-pointer']"
            @click="showPassword = !showPassword"></i>
        </div>

        <!-- 密码强度提示 -->
        <div class="password-strength" v-if="form.password">
          <span :class="['strength-label', passwordStrength]">{{ strengthText }}</span>
        </div>

        <div class="input-group">
          <input :type="showPassword ? 'text' : 'password'" v-model="form.confirmPassword" placeholder="请确认密码"
            class="form-input" />
          <i class="fas fa-lock input-icon"></i>
        </div>

        <div class="agreement-section">
          <label class="agreement-checkbox">
            <input type="checkbox" v-model="form.agreement" />
            <span>我已阅读并同意</span>
          </label>
          <a href="#" class="agreement-link">《用户协议》</a>
          <span>和</span>
          <a href="#" class="agreement-link">《隐私政策》</a>
        </div>

        <button type="submit" class="register-submit-button">
          注册账号
        </button>
      </form>

      <!-- 登录引导 -->
      <div class="login-guide">
        <p>已有账号？</p>
        <button @click="goToLogin" class="login-button">
          立即登录
        </button>
      </div>

      <!-- 装饰元素 -->
      <div class="decoration-circles">
        <div class="circle circle-1"></div>
        <div class="circle circle-2"></div>
        <div class="circle circle-3"></div>
      </div>
    </div>
  </div>
</template>


<script lang="ts" setup>
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';

const router = useRouter();
const logoUrl = 'https://ai-public.mastergo.com/ai/img_res/eb3d9aaf7744a674240fb36d6bc8080f.jpg';
const showPassword = ref(false);

const form = ref({
  username: '',
  phone: '',
  password: '',
  confirmPassword: '',
  agreement: false
});

const passwordStrength = ref(''); // weak | medium | strong
const strengthText = ref('');

watch(() => form.value.password, (newPassword) => {
  evaluatePasswordStrength(newPassword);
});

const evaluatePasswordStrength = (password: string) => {
  if (/^\d+$/.test(password)) {
    passwordStrength.value = 'weak';
    strengthText.value = '密码不能为纯数字';
    return;
  }

  let strength = 0;
  if (/[a-z]/.test(password)) strength++;
  if (/[A-Z]/.test(password)) strength++;
  if (/\d/.test(password)) strength++;
  if (/[\W_]/.test(password)) strength++;

  if (password.length < 6) {
    passwordStrength.value = 'weak';
    strengthText.value = '密码太短，至少6位';
  } else if (strength <= 2) {
    passwordStrength.value = 'weak';
    strengthText.value = '弱';
  } else if (strength === 3) {
    passwordStrength.value = 'medium';
    strengthText.value = '中';
  } else {
    passwordStrength.value = 'strong';
    strengthText.value = '强';
  }
};

const handleRegister = async () => {
  if (!form.value.agreement) {
    alert('请先同意用户协议和隐私政策');
    return;
  }
  if (!form.value.username || !form.value.phone || !form.value.password || !form.value.confirmPassword) {
    alert('请填写完整信息');
    return;
  }
  if (form.value.password !== form.value.confirmPassword) {
    alert('两次密码输入不一致');
    return;
  }
  if (/^\d+$/.test(form.value.password)) {
    alert('密码不能为纯数字');
    return;
  }

  try {
    const response = await axios.post('http://localhost:8080/api/auth/register', form.value, {
      headers: {
        'Content-Type': 'application/json'
      }
    });

    if (response.data.code === 200) {
      alert('注册成功！');
      router.push({ name: 'Login' });
    } else {
      alert('注册失败，错误信息：' + response.data.msg);
    }
  } catch (error) {
    console.error('注册请求失败', error);
    alert('注册失败，请检查网络或联系管理员');
  }
};

const goToLogin = () => {
  router.push({ name: 'Login' });
};
</script>


<style scoped>
@import '../assets/css/RegisterView.css';
</style>